<template>
  <div id="panel">
    <div class="topCen">
      <div ref="charA" class="charA"></div>
      <div ref="charB" class="charB"></div>
      <div class="topTable">
        <el-table :data="tableData" border style="width: 100%" height="400px">
          <el-table-column prop="segmentname" label="点位" width="180" />
          <el-table-column prop="dataTime" label="时间" width="180" />
          <el-table-column prop="qualitylevelname" label="水质类别" />
        </el-table>
      </div>
    </div>
    <div class="botCen">
      <div ref="charC" class="charC"></div>
    </div>
  </div>
</template>

<script>
import {
  getWaterFb,
  getSectionDb,
  getSectionWaterQualityList,
  getSectionWaterQualityDetail,
} from "@/api/riverGeneralMange/riverGeneralMange";
import * as echarts from "echarts";
export default {
  props: ["times", "ids"],
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 控制级别
      controlLevelCode: "1",
      // 表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    initData() {
      let query = {
        ids: this.ids.toString(),
        startTime: this.times[0],
        endTime: this.times[1],
        controlLevelCode: this.controlLevelCode,
      };
      // 水质级别分布图
      getWaterFb(query).then((res) => {
        this.initChart(res.data);
      });
      // 点位达标情况
      getSectionDb(query).then((res) => {
        console.log(">>>点位达标情况", res);
        this.initChart2(res.data);
      });
      //点位水质列表
      getSectionWaterQualityList(query).then((res) => {
        this.tableData = res.data;
      });
      //近一年点位水质详情
      let query2 = {
        ids: this.ids.toString(),
        endTime: new Date().getFullYear().toString(),
        controlLevelCode: this.controlLevelCode,
      };
      getSectionWaterQualityDetail(query2).then((res) => {
        console.log(">>>近一年点位水质详情", res);
        this.initChart3(res.data);
      });
    },
    // echarts图
    initChart(data) {
      let color = [
        "#0CD2E6",
        "#3751E6",
        "#FFC722",
        "#886EFF",
        "#008DEC",
        "#114C90",
        "#00BFA5",
      ];
      let legendData = data.map((item) => item.name);

      let option = {
        color: color,
        title: {
          text: "水质级别分布图(单位:个)",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          bottom: "0",
          data: legendData,
        },
        series: [
          {
            name: "水质类别",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "55%"],
            data: data,
            label: {
              show: true,
              formatter: "{b}: {c}",
            },
          },
        ],
      };
      // let maChar = echarts.init(document.getElementById("waterQuality"));
      let maChar = echarts.init(this.$refs.charA);
      maChar.setOption(option);
      window.addEventListener("resize", function () {
        maChar.resize();
      });
    },
    // echarts图2
    initChart2(data) {
      let color = [
        "#0CD2E6",
        "#FF0000",
        "#FFC722",
        "#886EFF",
        "#008DEC",
        "#114C90",
        "#00BFA5",
      ];
      let legendData = data.map((item) => item.name);

      let option = {
        color: color,
        title: {
          text: "点位达标情况(单位:个)",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },

        legend: {
          orient: "horizontal",
          bottom: "0",
          data: legendData,
        },
        series: [
          {
            name: "点位情况",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "55%"],
            data,
            label: {
              show: true,
              formatter: "{b}: {c}",
            },
          },
        ],
      };
      // let maChar = echarts.init(document.getElementById("waterQuality"));
      let maChar = echarts.init(this.$refs.charB);
      maChar.setOption(option);
      window.addEventListener("resize", function () {
        maChar.resize();
      });
    },
    // echarts图3
    initChart3(datas) {
      let color = [
        "#0CD2E6",
        "#3751E6",
        "#FFC722",
        "#886EFF",
        "#008DEC",
        "#114C90",
        "#00BFA5",
      ];
      let legendData = datas.series;
      let seriesdata = datas.series.map((e, index) => {
        return {
          name: e,
          type: "bar",
          stack: "分布",
          barWidth: "15%",
          data: datas.rawData[index],
        };
      });
      console.log(">>>seriesdata", seriesdata);

      let option = {
        color: color,
        title: {
          text: "近一年水质类别分布图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%", // 增大 bottom 的值，让图表整体靠下，可根据需求调整百分比或像素值，比如 '20%' 等
          containLabel: true,
        },
        legend: {
          top: "10%",
          data: legendData,
        },
        xAxis: {
          type: "category",
          data: [
            "2024-05",
            "2024-06",
            "2024-07",
            "2024-08",
            "2024-09",
            "2024-10",
            "2024-11",
            "2024-12",
            "2025-01",
            "2025-02",
            "2025-03",
            "2025-04",
          ],
        },
        yAxis: {
          type: "value",
          name: "数量(单位:个)",
        },
        series: seriesdata,
      };
      // let maChar = echarts.init(document.getElementById("waterQuality"));
      let maChar = echarts.init(this.$refs.charC);
      maChar.setOption(option);
      window.addEventListener("resize", function () {
        maChar.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
#panel {
  padding-bottom: 0px;
  min-height: calc(100% - 20px);
  margin: 0;
  .topCen {
    height: 400px;
    display: flex;
    div {
      height: 100%;
    }
    .charA {
      width: 35%;
    }
    .charB {
      width: 35%;
    }
    .topTable {
      width: 30%;
    }
  }
  .botCen {
    height: 300px;
    padding-top: 20px;
    .charC {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
